import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Icon, notification, Switch, Tooltip, Upload} from "antd";
import {importContainerOrder, query, showCreate} from "./actions";
import {getCurrentOrganization, getPrincipal} from "../../lib/identity";

class Toolbar extends PureComponent {
    state = {
        daiBan: false
    };
    handleShowCreate = () => {
        const {dispatch} = this.props;
        dispatch(showCreate());
    };

    onChangeDaiBan = (value, e) => {
        const {dispatch} = this.props;
        this.setState({daiBan: value});
        const daiBan = value ? "daiBan" : "";
        dispatch(query({"userId": getPrincipal().id, daiBan: daiBan, "organizationId": getCurrentOrganization()}));
    };

    customRequest = (options) => {
        const {dispatch} = this.props;
        dispatch(importContainerOrder({
            file: options.file,
            opId: getPrincipal().id
        })).then(() => {
            const daiBan = this.state.daiBan ? "daiBan" : "";
            dispatch(query({"userId": getPrincipal().id, daiBan: daiBan, "organizationId": getCurrentOrganization()}));
        });
    };
    uploadProps = {
        showUploadList: false,
        name: 'file',
        accept: '.xls, .xlsx, .csv',
        customRequest: this.customRequest
    };

    handleExport = () => {
        document.getElementById("exportContainerOrder").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };

    render() {
        const {filter = {}, importLoading} = this.props;
        return (
            <div className="actions">
                <Button onClick={this.handleShowCreate}><Icon type="plus"/>新增</Button>
                <Button href="/static/集装箱导入模板.xlsx" target="_blank">下载导入模板</Button>
                <Upload {...this.uploadProps}>
                    <Button disabled={importLoading}>
                        <Icon type="upload"/> 导入
                    </Button>
                </Upload>
                {getPrincipal().admin &&
                <Tooltip placement="top" title={"点击搜索后再导出"}><Button onClick={this.handleExport}><Icon type="export"/>导
                    出</Button></Tooltip>}
                <Switch style={{marginLeft: "10px"}} checkedChildren="打开待办" unCheckedChildren="关闭待办"
                        checked={this.state.daiBan === true}
                        onChange={this.onChangeDaiBan}/>
                <form
                    id="exportContainerOrder"
                    method="post"
                    target="_blank"
                    action="/api/containerOrder/export"
                >
                    <input
                        name="userId"
                        type="hidden"
                        value={getPrincipal().id}
                    />
                    <input
                        name="createDateStart"
                        type="hidden"
                        value={filter.createDateStart}
                    />
                    <input
                        name="createDateEnd"
                        type="hidden"
                        value={filter.createDateEnd}
                    />
                    <input
                        name="businessNumber"
                        type="hidden"
                        value={filter.businessNumber}
                    />
                    <input
                        name="clientId"
                        type="hidden"
                        value={filter.clientId}
                    />
                    <input
                        name="organizationId"
                        type="hidden"
                        value={filter.organizationId}
                    />
                    <input
                        name="cabinetNumber"
                        type="hidden"
                        value={filter.cabinetNumber}
                    />
                </form>
            </div>

        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.containerOrder.list
    };
};

export default connect(mapStateToProps)(Toolbar);
